<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>过滤器</title>
    <script src="../js/vue.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/dayjs/1.11.6/dayjs.min.js"></script>
</head>
<body>
    <!-- 
        过滤器:处理简单的文本
        语法：{{itme|filterName}} 
        配置：
        filters:{
            filterName(val){
                return val.slice(0,4)
            }
        }
     -->
    <div id="root">
        <!-- 计算属性 -->
        现在的时间:{{formatTiem}} <br><br>
        <!-- 函数 -->
        现在的时间:{{getFormatTiem()}} <br><br>
        <!-- 过滤器 第一个值作为值传入到过滤器函数的第一个产生，
            如果写了产生如mySlice(5) 5作为第二个参数传到过滤器函数中 -->
        现在的时间:{{time | formatTiem | mySlice(5)}} <br><br>
        <!-- 不常见 可以配合v-bind 使用 不能配合v-model 使用，常用在插值语法中使用 -->
        <p :x="msg|mySlice">时间戳</p>
    </div>
    
</body>
<script type="text/javascript">
    Vue.config.productionTip = false //以阻止 vue 在启动时生成生产提示。
    //全局的
    Vue.filter('mySlice',function(val,number=4){
        return val.slice(0,number)
    })
    //创建Vue
    const vm = new Vue({
        el:'#root', 
        data:{
            time:1667982947650,
            msg:'aaaaaads'
        },
        computed:{
            formatTiem:function(){
                return dayjs(this.time).format('YYYY-MM-DD HH:mm:ss')
            }
        },
        methods:{
            getFormatTiem(){
                return dayjs(this.time).format('HH:mm:ss')
            }
        },
        filters:{
            //局部的过滤器
            formatTiem(val){
                return dayjs(val).format('YYYY-MM-DD HH:mm:ss')
            }
        }
    })

</script>
</html>